<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>页脚组件</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .content {
            flex: 1;
            padding: 40px 20px;
            text-align: center;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
        }

        .content h1 {
            font-size: 36px;
            color: #1e9fff;
            margin-bottom: 20px;
        }

        .content p {
            font-size: 18px;
            color: #555;
            max-width: 800px;
            margin: 0 auto 30px;
            line-height: 1.6;
        }

        #footer {
            background-color: #f0f2f5;
            padding: 0;
            margin-top: auto;
            border-top: 1px solid #d5d5d5;
        }

        #footer ul {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 80px;
            list-style: none;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            flex-wrap: wrap;
        }

        #footer ul li {
            color: #919698;
            font-size: 14px;
            margin-right: 20px;
            padding: 8px 0;
        }

        #footer ul li:last-child {
            margin-right: 0;
        }

        #footer a {
            color: #919698;
            font-size: 14px;
            text-decoration: none;
            transition: color 0.3s;
        }

        #footer a:hover {
            color: #1e9fff;
        }

        .footer-content {
            display: flex;
            justify-content: space-between;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .footer-section {
            flex: 1;
            padding: 20px;
        }

        .footer-title {
            font-size: 18px;
            color: #333;
            margin-bottom: 15px;
            font-weight: bold;
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 10px;
        }

        .footer-bottom {
            text-align: center;
            padding: 15px 0;
            background-color: #e6e9ed;
            color: #777;
            font-size: 13px;
        }

        @media (max-width: 768px) {
            #footer ul {
                flex-direction: column;
                height: auto;
                padding: 20px 0;
            }

            #footer ul li {
                margin-right: 0;
                margin-bottom: 10px;
            }

            .footer-content {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
<div class="content">
    <h1>页脚组件示例</h1>
    <p>这是一个展示页脚组件的示例页面。下方是使用纯HTML/CSS实现的页脚组件，保留了原始Vue组件的样式和布局。</p>
    <p>您可以滚动到页面底部查看完整的页脚效果。</p>
</div>

<footer id="footer">
    <div class="footer-content">
        <div class="footer-section">
            <div class="footer-title">关于我们</div>
            <p style="color: #919698; line-height: 1.6; font-size: 14px;">
                杭州水果捞是一家专注于在线教育技术的高科技企业，致力于为教育机构提供先进的在线考试和学习解决方案。
            </p>
        </div>

        <div class="footer-section">
            <div class="footer-title">快速链接</div>
            <ul class="footer-links">
                <li><a href="#">首页</a></li>
                <li><a href="#">考试中心</a></li>
                <li><a href="#">学习资源</a></li>
                <li><a href="#">成绩查询</a></li>
            </ul>
        </div>

        <div class="footer-section">
            <div class="footer-title">联系我们</div>
            <ul class="footer-links">
                <li><i class="fa fa-map-marker"></i> 杭州市西湖区科技园88号</li>
                <li><i class="fa fa-phone"></i> 0571-88888888</li>
                <li><i class="fa fa-envelope"></i> contact@fruitmix.com</li>
            </ul>
        </div>
    </div>

    <ul>
        <li><a href="javascript:;">关于我们</a></li>
        <li><a href="javascript:;">免责声明</a></li>
        <li><a href="javascript:;">使用协议</a></li>
        <li>@Copyright 杭州水果捞</li>
    </ul>

    <div class="footer-bottom">
        <p>浙ICP备12345678号 | 浙公网安备 33010602001234号 | 版权所有 © 2023 杭州水果捞科技有限公司</p>
    </div>
</footer>

<script>
    // 简单的滚动效果
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
</script>
</body>
</html>